<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>研学旅行</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
	<link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>

</head>
<body>
    <!-- 顶部开始 -->
    <div class="container" th:include="head :: header">
    	
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
        	<div id="side-nav"  th:include="left :: left_nav">
        	
        	</div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <blockquote class="layui-elem-quote">
               	
            </blockquote>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote" style="text-align: center;">
            	<p style="font-size:20px;font-weight:600;">最受欢迎项目表格数据图</p>
            	<a id="daoru" class="layui-btn" style="position:absolute;right: 50px;top:465px;" onclick="daoru()" >生成Excel文件</a>
               <table class="layui-table" >
  					<thead>
  						<tr>
  							<th>活动名称</th>
  							<th>活动热度</th>
  						</tr>
  					</thead>
  					<tbody>
  						<tr th:each="activity : ${ActivityTj}">
  							<td th:text="${activity.name}"></td>
  							<td th:text="${activity.value}"></td>
  						</tr>
  					</tbody>
  					
				</table>
            </blockquote>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2019 研学旅行管理系统</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/echarts-for-x-admin.js}"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
        <script type="text/javascript">
        function daoru(){
     		MonthsSrExcel = "http://localhost:8080/MonthsDdnum";
     		window.location.href=MonthsSrExcel; 
     	}
        
        $(function(){
 var vue = new Vue({
        		 
        		 el:".bg-out",
        		 data : {
        			 data : [],
        	        data2:[]
        		 }
        		 
        	 });
        	 
        	 $.ajax({
     			url:"http://localhost:8080/toAjaxActivity",
     			data:{},
     			type:"post",
     			dataType:"json",
     			success:function(data){
     				for(var i=0;i<data.length;i++){
     					vue.data[i]=data[i];
     				}
     			}
     			
     		});
        	 
        	 $.ajax({
      			url:"http://localhost:8080/toAjaxActivityTwo",
      			data:{},
      			type:"post",
      			dataType:"json",
      			success:function(data){
      				vue.data2=data;
      			}
      			
      		});
        	
        	
        	setTimeout(function(){
        		 // 基于准备好的dom，初始化echarts实例
        	       var dom = document.getElementById("main");
        	var myChart = echarts.init(dom);
        	var app = {};
        	option = null;
        	var weatherIcons = {
        	    
        	};

        	option = {
        	    title: {
        	        text: '年度最受欢迎活动项目',
        	        subtext: '数据库数据',
        	        left: 'center'
        	    },
        	    toolbox: {
        			show: true,
                feature: {
                   
                    dataView: {readOnly: false},
                   
                    saveAsImage: {}
                },
                itemSize:18,//工具栏 icon 的大小
                iconStyle:{
                    normal:{
                      borderColor:'skyblue',
                      
                    }
                
                }
             },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },
        	    legend: {
        	        // orient: 'vertical',
        	        // top: 'middle',
        	        bottom: 10,
        	        left: 'center',
        	        data: vue.data2
        	    },
        	    series : [
        	        {
        	            type: 'pie',
        	            radius : '65%',
        	            center: ['50%', '50%'],
        	            selectedMode: 'single',
        	            data:vue.data
        	            	/*[
        	                {value:5352, name: '采药'},
        	                {value:5352, name: '采矿'},
        	                {value:2000, name: '种地'},
        	                {value:6340, name: '骑马'},
        	                {value:7352	, name: '射击'}
        	            ]*/
        	        ,
        	            itemStyle: {
        	                emphasis: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};
        	;
        	if (option && typeof option === "object") {
        	    myChart.setOption(option, true);
        	}
        	},100);
        });
        
       
    </script>
        
        
</body>
</html>